<template>
    <div class="user">
        <van-nav-bar
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
        />
        <div class="box">
            <div class="userInfo">
                <div class="userImg">
                    <img :src="data.user_photo" alt="">
                </div>
                <div class="userCont">
                    <div class="userName">
                        <div class="name">{{data.nick}}</div>
                        <div class="medal" v-if="data.usermedal">
                            <img :src="data.usermedal.icon" alt="">
                            <span>{{data.usermedal.count_text}}</span>
                        </div>
                        <div class="lv">LV.{{data.lvl}}</div>
                    </div>
                    <!-- <div class="but"></div> -->
                </div>
            </div>
            <div class="infoCont">
                <div class="info">
                    <span>{{data.age}}</span>
                    <span>{{data.location}}</span>
                </div>
                <div class="infotext">
                    {{data.introduction}}
                </div>
                <div class="infoSum">
                    <div class="item">
                        <div class="top">{{data.following_count_text}}</div>
                        <div class="bottom">关注</div>
                    </div>
                    <div class="item">
                        <div class="top">{{data.followers_count_text}}</div>
                        <div class="bottom">粉丝</div>
                    </div>
                    <div class="item">
                        <div class="top">{{data.favoed_count_text}}</div>
                        <div class="bottom">被收藏</div>
                    </div>
                    <div class="item">
                        <div class="top">{{data.noted_count_text}}</div>
                        <div class="bottom">被学做</div>
                    </div>
                    <div class="item">
                        <div class="top">{{data.point_text}}</div>
                        <div class="bottom">经验值</div>
                    </div>
                </div>
                <!-- <div class="type">
                    <div class="typeItem" @click="binxz" :class="xzid==='0' ? 'xz' : ''" data-xzid="0">菜谱 {{data.recipes_count}}</div>
                    <div class="typeItem" @click="binxz" :class="xzid==='1' ? 'xz' : ''" data-xzid="1">笔记 {{data.notes_count}}</div>
                    <div class="typeItem" @click="binxz" :class="xzid==='2' ? 'xz' : ''" data-xzid="2">收藏 {{data.collect_count}}</div>
                </div> -->
                <van-tabs v-model="xzid">
                    <van-tab :title="'菜谱 '+data.recipes_count">
                        <caipu></caipu>
                    </van-tab>
                    <van-tab :title="'笔记 '+data.notes_count">
                        <biji></biji>
                    </van-tab>
                    <van-tab :title="'收藏 '+data.collect_count">
                        <shoucang></shoucang>
                    </van-tab>
                </van-tabs>
                <!-- <div class="contBox">
                    <keep-alive>
                    <router-view></router-view>
                    </keep-alive>
                </div> -->
            </div>
        </div>
    </div>
</template>

<script>
import caipu from '@/views/Caipu'
import biji from '@/views/Biji'
import shoucang from '@/views/shoucang'
    export default {
        name:'user',
        data() {
            return {
                data:{},
                xzid:0,
                id:0,
                cj:1
            }
        },
        components:{
            caipu,
            biji,
            shoucang
        },
        created(){
            this.id = this.$route.query.id
            this.axios.get(`https://apis.netstart.cn/douguo/user/info/${this.id}`). then((response) => {
            this.data = response.data.result.user
            })
        },
         methods: {
            onClickLeft() {
                this.$router.back()
            },
            binxz(e){
                this.xzid = e.target.dataset.xzid
                switch (e.target.dataset.xzid) {
                    case '0':
                        this.$router.push({name:'caipu',query:{id:this.id}})
                        break;
                    case '1':
                        this.$router.push({name:'biji',query:{id:this.id}})
                        break;
                    case '2':
                        this.$router.push({name:'shoucang',query:{id:this.id}})
                        break;
                }
            }
        },
        activated(){
            // this.xzid = 0
            // this.cj=1
            this.id = this.$route.query.id
            this.axios.get(`https://apis.netstart.cn/douguo/user/info/${this.id}`). then((response) => {
            this.data = response.data.result.user
            })
            // this.$router.push({name:'caipu',query:{id:this.id}})
        },
        // beforeRouteUpdate(to,from,next){
        //     this.cj +=1
        //     console.log(to,from);
        // next();
        // }
    }
</script>

<style lang="less" scoped>
    /deep/.van-nav-bar__text {
    color: #6e6e6e;
    }
    /deep/.van-nav-bar .van-icon {
    color: #6e6e6e;
    }
    .box{
        padding: 0 10px;
        box-sizing: border-box;
        .userInfo{
            width: 100%;
            height: 60px;
            display: flex;
            align-items: center;
            .userImg{
                height: 100%;
                img{
                    display: block;
                    height: 100%;
                    border-radius: 50%;
                }
            }
            .userCont{
                margin-left: 10px;
                .userName{
                    height: 25px;
                    display: flex;
                    align-items: center;
                   .name{
                    font-size: 18px;
                    }
                    .medal{
                        height: 25px;
                        position: relative;
                        img{
                            height: 100%;
                        }
                        >span{
                            position: absolute;
                            top: 4px;
                            right: 4px;
                            color: #8f8e8e;
                        }
                    } 
                    .lv{
                        color: #ffd902;
                        font-size: 14px;
                        margin-left: 5px;
                    }
                }
                
            }
        }
        .infoCont{
            margin-top: 10px;
            .info{
                >span{
                    margin-right: 20px;
                }
            }
            .infotext{
                margin-top: 10px;
                line-height: 25px;
                font-size: 14px;
            }
            .infoSum{
                display: flex;
                margin-top: 10px;
                .item{
                    flex: 1;
                    text-align: center;
                    .bottom{
                        color: #6e6e6e;
                        margin-top: 5px;
                    }
                }
            }
        }
        .type{
            display: flex;
            justify-content: space-evenly;
            padding: 25px 0;
            .typeItem{
                color: #8f8e8e;
                font-size: 14px;
                padding: 10px 0;
            }
            .xz{
                border-bottom: 3px solid #ffd902;
                color: #252525;
                font-weight: 600;
            }
        }
        .contBox{
            width: 100%;
            height: calc(100vh - 331px);
        }
    }
</style>